<template>
	<div :style="{backgroundImage:'url('+data.url+')'}" class="box-backimage">
		<div v-for="item in data.log" :key="item.key">
			<div class="box-log" @click="handleInfo(item)">
				<div style="margin-top: 8px;">
					<p class="title-log" style="color: #16160e;">{{item.logTitle}}</p>
				</div>
				<div class="box-log-content">
					<p style="font-size: 25px;color: #16160e; ">{{item.logContent}}</p>
				</div>
				<div :style="{backgroundImage:'url('+item.logPicture+')'}" class="box-logimage">
				</div>
				<div style="height: 55px; width: 50%;float: right;overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;margin-top: 50px;">
					<p style="font-size: 20px;color: #16160e;">{{item.logLocation}}</p>
					<p style="font-size: 15px;color: #16160e;">{{item.logTime}}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		reactive,
		onMounted,
		onActivated,
		toRefs
	} from 'vue'
	import {
		useAppStore
	} from '@/store/modules/app.js'
	export default {
		setup() {
			const userStore = useAppStore()
			let data = reactive({
				user: {
					userName: '',
					userAvator: '',
					userSignature: '',
					userEmail: ''
				},
				log: [],
				url: ''
			});
			onActivated(() => {
				if (userStore.userId === '') {
					uni.showToast({
						title: "未登录",
						icon: 'none',
						duration: 1500
					})
					return;
				}
				uni.request({
					url: 'http://175.178.249.171:8092/api/log/getAllLog/' + userStore.userId,
					method: 'GET',
					success: (res) => {
						data.log = res.data.data
						data.url = userStore.url
						data.user = userStore.user
					}
				})
			})
			onMounted(() => {
				if (userStore.userId === '') {
					uni.showToast({
						title: "未登录",
						icon: 'none',
						duration: 1500
					})
					return;
				}
				uni.request({
					url: 'http://175.178.249.171:8092/api/log/getAllLog/' + userStore.userId,
					method: 'GET',
					success: (res) => {
						data.log = res.data.data
						data.url = userStore.url
						data.user = userStore.user
					}
				})
			})

			function handleInfo(log) {
				userStore.log = log
				console.log(userStore.log)
				uni.navigateTo({
					url: '/pages/info/info'
				})
			}

			return {
				data,
				handleInfo
			};
		}
	}
</script>

<style>
	.box-log {
		border: 1px solid #fffbf0;
		background: #fffbf0;
		height: 200px;
		width: 90%;
		margin: 0 auto;
		border-radius: 15px;
		margin-top: 15px;
		opacity: 0.9;
	}

	.box-log-content {
		padding-top: 10px;
		width: 90%;
		margin: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.title-log {
		text-align: center;
		font-size: 35px;
	}

	.box-backimage {
		width: 100%;
		background-repeat: repeat;
		background-size: 100% auto;
		background-position: 0 100%;
		position: absolute;
	}

	.box-logimage {
		height: 100px;
		width: 40%;
		float: left;
		background-repeat: repeat;
		background-size: 100% auto;
		background-position: 0 100%;
		position: absolute;
	}

	.box-userimage {
		width: 60%;
		margin: auto;
		height: 180px;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 100%;
	}

	.box-userimage img {
		width: 100%;
		height: 100%;
	}
</style>
